<!-- components/TemporaryRoleDialog.vue -->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="editingRoleIndex === -1 ? '添加临时角色' : '编辑临时角色'"
    :width="isMobile ? '90%' : 700"
    :fullscreen="isMobile"
  >
    <el-form
      ref="temporaryRoleForm"
      :model="formData"
      :label-width="isMobile ? '80px' : '100px'"
      :label-position="isMobile ? 'top' : 'right'"
      class="temp-role-form"
    >
      <el-form-item
        label="开始时间"
        prop="from"
        :rules="[
          { required: true, message: '请选择开始时间', trigger: 'change' },
        ]"
      >
        <el-time-picker
          :value="formData.from"
          @update:model-value="updateField('from', $event)"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="选择开始时间"
          style="width: 100%"
          :size="isMobile ? 'large' : 'default'"
        ></el-time-picker>
      </el-form-item>

      <el-form-item
        label="结束时间"
        prop="to"
        :rules="[
          { required: true, message: '请选择结束时间', trigger: 'change' },
        ]"
      >
        <el-time-picker
          :value="formData.to"
          @update:model-value="updateField('to', $event)"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="选择结束时间"
          style="width: 100%"
          :size="isMobile ? 'large' : 'default'"
        ></el-time-picker>
      </el-form-item>

      <CheckboxGroup
        label="资质"
        prop="qualificationIds"
        :model-value="formData.qualificationIds"
        :options="options.qualifications"
        :is-mobile="isMobile"
        @update:model-value="updateField('qualificationIds', $event)"
        @change="handleQualificationsChange"
      />

      <CheckboxGroup
        label="所属组织"
        prop="organizationIds"
        :model-value="formData.organizationIds"
        :options="options.organizations"
        :is-mobile="isMobile"
        @update:model-value="updateField('organizationIds', $event)"
        @change="handleOrganizationsChange"
      />

      <CheckboxGroup
        label="可用席位"
        prop="availableSeatIds"
        :model-value="formData.availableSeatIds"
        :options="formattedSeats"
        :is-mobile="isMobile"
        @update:model-value="updateField('availableSeatIds', $event)"
        @change="handleAvailableSeatsChange"
      />
    </el-form>

    <template #footer>
      <el-button @click="$emit('close')" :size="isMobile ? 'large' : 'default'">取消</el-button>
      <el-button type="primary" @click="$emit('save')" :size="isMobile ? 'large' : 'default'">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, watch, ref } from "vue";
import CheckboxGroup from "./CheckboxGroup.vue";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
  formData: {
    type: Object,
    required: true,
  },
  editingRoleIndex: {
    type: Number,
    default: -1,
  },
  options: {
    type: Object,
    required: true,
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
});

const dialogVisible = ref(props.showDialog);

const emit = defineEmits([
  "close",
  "save",
  "update:formData",
  "update:showDialog",
]);

const formattedSeats = computed(() => {
  return props.options.seats.map((seat) => ({
    id: seat,
    name: seat,
  }));
});

// 更新字段的通用方法
const updateField = (field, value) => {
  const updatedData = {
    ...props.formData,
    [field]: value,
  };
  emit("update:formData", updatedData);
};

const handleQualificationsChange = (values) => {
  const qualifications = props.options.qualifications
    .filter((item) => values.includes(item.id))
    .map((item) => item.name);

  const updatedData = {
    ...props.formData,
    qualifications,
  };
  emit("update:formData", updatedData);
};

const handleOrganizationsChange = (values) => {
  const organizations = props.options.organizations
    .filter((item) => values.includes(item.id))
    .map((item) => item.name);

  const updatedData = {
    ...props.formData,
    organizations,
  };
  emit("update:formData", updatedData);
};

const handleAvailableSeatsChange = (values) => {
  const updatedData = {
    ...props.formData,
    availableSeats: [...values],
  };
  emit("update:formData", updatedData);
};

// 监听父组件的showDialog变化，同步到子组件内部状态
watch(
  () => props.showDialog,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);

// 监听子组件内部状态变化，通知父组件更新
watch(dialogVisible, (newVal) => {
  emit("update:showDialog", newVal);
});
</script>

<style scoped>
.temp-role-form {
  margin-top: 10px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .temp-role-form {
    margin-top: 0;
  }
  
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  
  :deep(.el-time-picker) {
    width: 100%;
  }
}
</style>